<template>
  <view class="he-page-content" :data-theme="theme">
    <text class="he-mobile-text" v-if="mobile">
      更换手机后，下次登录可使用新手机号登录。 当前手机号：{{ mobile }}
    </text>
    <view class="he-box">
      <view class="he-item flex">
        <text class="he-item__label">手机号</text>
        <input
          type="number"
          class="he-item__input flex-sub"
          v-model="iphone"
          placeholder-style="font-size: 26rpx;font-family: PingFang SC;font-weight: 500;color: #999999;"
          :maxlength="16"
          placeholder="请填写要绑定的手机号"
        />
      </view>
      <view class="he-item flex">
        <text class="he-item__label">验证码</text>
        <input
          type="number"
          class="he-item__input flex-sub"
          v-model="code"
          placeholder-style="font-size: 26rpx;font-family: PingFang SC;font-weight: 500;color: #999999;"
          oninput="value=value.replace(/[^\d]/g,'')"
          placeholder="请填写收到的验证码"
        />
        <button
          type="text"
          class="cu-btn he-item__get-code"
          :disabled="!!time"
          :class="time ? 'he-item__get-code-0' : 'he-item__get-code-1'"
          @click="getCode"
        >
          {{ time ? num + "s后重新获取" : "获取验证码" }}
        </button>
      </view>
    </view>
    <button class="cu-btn he-submit" :disabled="disabled" @click="submit">
      确认绑定
    </button>
  </view>
</template>

<script>
export default {
  name: "bind-phone",
  data() {
    return {
      iphone: "",
      code: "",
      time: null,
      num: 60,
    };
  },
  computed: {
    mobile: function () {
      return this.$store.state.apply.userInfo.mobile;
    },
    disabled: function () {
      if (!this.iphone || !this.code) return true;
      return false;
    },
  },
  methods: {
    submit: function () {
      let _this = this;
      if (this.iphone && this.code) {
        this.$heshop
          .users(
            "put",
            {
              behavior: "bindMobile",
              type: "code",
            },
            {
              mobile: this.iphone,
              code: this.code,
            }
          )
          .then(function () {
            _this.$h.toast("绑定手机号成功");
            _this.$store.state.apply.userInfo.mobile = _this.iphone;
            let userInfo = uni.getStorageInfoSync("userInfo");
            userInfo.mobile = _this.iphone;
            uni.setStorageSync("userInfo", userInfo);
            uni.switchTab({
              url: "/pages/user/index",
            });
          })
          .catch(function (err) {
            _this.$h.toast(err.data.message);
          });
      }
    },
    getCode: function () {
      if (!this.iphone) return;
      if (this.time) return;
      let _this = this;
      this.$heshop
        .sms("post", {
          mobile: this.iphone,
          type: 1,
        })
        .then(function (err) {
          _this.time = setInterval(function () {
            _this.num--;
            if (_this.num <= 0) {
              clearInterval(_this.time);
              _this.time = null;
            }
          }, 1000);
        })
        .catch(function (err) {
          _this.$h.toast(err.data.message);
        });
    },
  },
  beforeDestroy() {
    this.time ? clearInterval(this.time) : null;
  },
};
</script>

<style scoped lang="scss">
.he-page-content {
  padding: 20px;
}

.he-box {
  width: 710px;
  background: #ffffff;
  border-radius: 16px;
  padding: 16px 24px;
}

.he-item {
  height: 100px;
}

.he-item:first-child {
  border-bottom: 1px solid #e5e5e5;
}

.he-submit {
  margin-top: 80px;
  width: 710px;
  height: 80px;
  border-radius: 40px;
  font-size: 28px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #ffffff;
  @include background_color("background_color");
}
.he-submit[disabled] {
  background: #cccccc !important;
  color: #ffffff;
}
.he-item__label {
  font-size: 26px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #222222;
  width: 156px;
  line-height: 100px;
}

.he-item__input {
  height: 100px;
  width: 100%;
}

.he-item__get-code {
  width: 240px;
  height: 100px;
  padding: 0;
  font-size: 26px;
  font-family: PingFang SC;
  font-weight: 500;
  background-color: #ffffff;
}

.he-item__get-code-0 {
  color: #999999;
}

.he-item__get-code-1 {
  @include font_color("font_color");
}

.he-mobile-text {
  font-size: 26px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #666666;
  line-height: 32px;
  margin: 20px 0;
  display: inline-block;
}
</style>
